$(function() {
    // 初始化文章分类列表
    initArtCateList()

    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(res.data.message)
            let arr = []
            res.data.data.forEach(e => {
                if (e.Id < 0) return
                arr.push(`<tr>
                <td>${e.Id}</td>
                <td>${e.name}</td>
                <td>${e.alias}</td>
                <td>
                    <button data-id="${e.Id}" class="layui-btn layui-btn-xs btn-edit">编辑</button>
                    <button class="layui-btn layui-btn-xs layui-btn-danger btn-del">删除</button>
                </td>
            </tr>`)
                $('tbody').empty().html(arr.join(''))
            })
        })
    }


    let indexadd = 0
        //添加图书弹出层
    $('#addBtn').on('click', function() {
            indexadd = layer.open({
                type: 1,
                title: '添加文章分类',
                area: ['500px', '260px'],
                content: `
                        <!-- 添加分类表单 -->
                        <form class="layui-form" action="" id="addForm">
                            <!-- 分类名称 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!-- 分类别名 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类别名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!-- 按钮 -->
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form> `
            });
        })
        // 添加
    $('body').on('submit', '#addForm', function(e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(res.data.message)
                // 清空表单
            $('#addForm')[0].reset()
                // 渲染
            initArtCateList()
                // 关闭弹出层
                // 关闭所有弹出层
                // layer.closeAll()
                // 关闭特定弹出层
            layer.close(indexadd)
        })
    })


    let indexedit = 0

    //修改图书弹出层
    $('tbody').on('click', '.btn-edit', function() {
            indexedit = layer.open({
                type: 1,
                title: '修改文章分类',
                area: ['500px', '260px'],
                content: `
                        <!-- 添加分类表单 -->
                        <form class="layui-form" action="" id="editForm" lay-filter="editForm">
                            <input type="hidden" name="Id">
                            <!-- 分类名称 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!-- 分类别名 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类别名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!-- 按钮 -->
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                                </div>
                            </div>
                        </form> `
            })
            let id = $(this).attr('data-id')
            axios({
                method: 'GET',
                url: '/my/article/cates/' + id
            }).then(res => {
                // console.log(res)
                if (res.data.status != 0) {
                    return layui.layer.msg(res.data.message)
                }
                layui.form.val('editForm', res.data.data)
            })

        })
        //修改
    $('body').on('submit', '#editForm', function(e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(res => {
            // console.log(res);
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(res.data.message)
                // 清空表单
                // $('#editForm')[0].reset()
                // 渲染
            initArtCateList()
                // 关闭弹出层
                // 关闭所有弹出层
                // layer.closeAll()
                // 关闭特定弹出层
            layer.close(indexedit)
        })
    })


    // 删除
    $('tbody').on('click', '.btn-del', function() {
        let id = $(this).siblings('button').attr('data-id')
        axios({
            method: 'GET',
            url: '/my/article/deletecate/' + id
        }).then(res => {
            console.log(res);
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(res.data.message)
                // 渲染
            initArtCateList()

        })
    })
})